html,
body {
  height: 100%;
}

*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

$background: #2d3d50;
$flame: #ffad00;
$flame-shadow: #ffad00;
$wax: #ffffff;
$wax-shadow: #d8deed;
$wick: #ad87a9;
$stand: #1c233e;

body {
  background-color: darken($background, 10%);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 4px;
  box-shadow: 4px 8px 16px 0 #00000010;
  overflow: hidden;
  background: $background;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .candle {
    display: flex;
    flex-direction: column;
    align-items: center;
    &-flame {
      width: 15px;
      height: 30px;
      background-color: $flame;
      border-radius: 8px 8px 8px 8px / 20px 20px 8px 8px;
      box-shadow: 0 0 20px 0 $flame-shadow, 0 0 40px 0 #ffad00aa,
        0 0 60px 0 #ffad0088;
      animation: flame-twirl 15s ease infinite, glow 2s ease infinite;
    }
    &-wick {
      height: 10px;
      width: 3px;
      background-color: $wick;
    }
    &-wax {
      width: 40px;
      height: 110px;
      background-color: $wax;
      border-radius: 6px;
      box-shadow: inset -15px 0 0 -10px $wax-shadow;
    }
    &-stand {
      width: 100px;
      height: 8px;
      background-color: $stand;
      border-radius: 2px;
    }
  }
}

@keyframes flame-twirl {
  0%,
  22%,
  49%,
  62%,
  81%,
  100% {
    border-radius: 2px 14px 8px 8px / 20px 20px 8px 8px;
  }
  14%,
  32%,
  56%,
  70%,
  89% {
    border-radius: 14px 2px 8px 8px / 20px 20px 8px 8px;
  }
}

@keyframes glow {
  0%,
  30%,
  60%,
  80%,
  100% {
    box-shadow: 0 0 20px 0 #ffad00;
  }
  20%,
  50%,
  70% {
    box-shadow: 0 0 20px 0 $flame-shadow, 0 0 40px 0 #ffad00aa,
      0 0 60px 0 #ffad0088;
  }
}
